import 'package:flutter/material.dart';
import 'package:kq_flutter_core_widget/widgets/chart/kq_chart.dart';
import 'package:kq_flutter_core_widget/widgets/chart/radar/radar_chart.dart';
import 'package:get/get.dart';

/// 雷达图
class RadarChartPage extends StatefulWidget {
  const RadarChartPage({super.key});

  @override
  State<RadarChartPage> createState() => _RadarChartPageState();
}

class _RadarChartPageState extends State<RadarChartPage> {
  List<RadarData>? _dataList;

  @override
  void initState() {
    super.initState();
    prepareData();
  }

  void prepareData() async {
    _dataList = [];
    // var buffer = await ImmutableBuffer.fromAsset(Images.demoRight);
    // var codec = await ui.instantiateImageCodecFromBuffer(buffer,
    //     targetWidth: 240, targetHeight: 240);
    // var image = (await codec.getNextFrame()).image;
    var data = RadarData(
      lineColor: const Color(0xFF106CF5),
      fillBg: true,
      fillBgColor: const Color(0x335283C9),
      // fillBgDrawable: image,
      values: [
        RadarEntity(value: 85, xIndex: 0),
        RadarEntity(value: 75, xIndex: 1),
        RadarEntity(value: 95, xIndex: 2),
        RadarEntity(value: 70, xIndex: 3),
        RadarEntity(value: 65, xIndex: 4),
        RadarEntity(value: 80, xIndex: 5),
      ],
    );
    _dataList?.add(data);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('雷达图'),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          color: Colors.white,
          onPressed: Get.back,
        ),
      ),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Align(
              alignment: Alignment.center,
              child: buildRadarChart(),
            ),
          ),
          SliverToBoxAdapter(
            child: Align(
              alignment: Alignment.center,
              child: buildRadarChart2(),
            ),
          ),
          SliverToBoxAdapter(
            child: Align(
              alignment: Alignment.center,
              child: buildRadarChart3(),
            ),
          ),
          const SliverToBoxAdapter(
            child: Align(
              alignment: Alignment.center,
              child: Text(
                "下面为两种无数据的展示方式：",
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Align(
              alignment: Alignment.center,
              child: buildEmptyRadarChart(),
            ),
          ),
          SliverToBoxAdapter(
            child: Align(
              alignment: Alignment.center,
              child: buildEmptyRadarChart2(),
            ),
          )
        ],
      ),
    );
  }

  /// 常规饼状图
  Widget buildRadarChart() {
    return SizedBox(
      width: 300,
      height: 300,
      child: KqChart(
        delegate: KqRadarChartDelegate.withDefault(
            animDuration: const Duration(seconds: 2),
            radius: 120,
            drawStartAngle: 30,
            xAxis: RadarXAxis(
              labelCount: 6,
              lineWidth: 0.5,
              lineColor: Colors.grey[400]!,
              valueFormatter: (position) => '测试数据$position',
            ),
            yAxis: RadarYAxis(
              lineWidth: 0.5,
              lineColor: Colors.grey[400]!,
              drawLabel: true,
              lineStyle: LineStyle.liner,
              labelOffsetAxis: 2,
              labelDrawStartAngle: -30,
              lineDashConfig: (position) => position == 3 ? [5, 5] : null,
              valueFormatter: (position) =>
                  position == 0 ? '' : (position * 20).toString(),
            ),
            gestureHandler: RadarChartGestureHandler(dragEnable: false),
            dataRender: const RadarDataRender(
                highLightRender: RadarChartHighLightRender()),
            data: _dataList),
      ),
    );
  }

  /// 常规饼状图
  Widget buildRadarChart2() {
    return SizedBox(
      width: 300,
      height: 300,
      child: KqChart(
        delegate: KqRadarChartDelegate.withDefault(
            animDuration: const Duration(seconds: 2),
            radius: 120,
            drawStartAngle: 30,
            xAxis: RadarXAxis(
              labelCount: 6,
              lineWidth: 0.5,
              lineColor: Colors.grey[400]!,
              valueFormatter: (position) => '测试数据$position',
            ),
            yAxis: RadarYAxis(
              lineWidth: 0.5,
              lineColor: Colors.grey[400]!,
              drawLabel: true,
              lineStyle: LineStyle.circle,
              labelOffsetAxis: 2,
              labelDrawStartAngle: -30,
              lineDashConfig: (position) => position == 3 ? [5, 5] : null,
              valueFormatter: (position) =>
                  position == 0 ? '' : (position * 20).toString(),
            ),
            dataRender: const RadarDataRender(
                highLightRender: RadarChartHighLightRender()),
            data: [
              RadarData(
                lineColor: const Color(0xFF106CF5),
                fillBg: true,
                fillBgColor: const Color(0x335283C9),
                // fillBgDrawable: image,
                values: [
                  RadarEntity(value: 85, xIndex: 0),
                  RadarEntity(value: 75, xIndex: 1),
                  RadarEntity(value: 95, xIndex: 2),
                  RadarEntity(value: 70, xIndex: 3),
                  RadarEntity(value: 65, xIndex: 4),
                  RadarEntity(value: 80, xIndex: 5),
                ],
              )
            ]),
      ),
    );
  }

  /// 常规饼状图
  Widget buildRadarChart3() {
    return SizedBox(
      width: 300,
      height: 300,
      child: KqChart(
        delegate: KqRadarChartDelegate.withDefault(
            animDuration: const Duration(seconds: 2),
            radius: 120,
            drawStartAngle: 30,
            xAxis: RadarXAxis(
              labelCount: 6,
              lineWidth: 0.5,
              lineColor: Colors.grey[400]!,
              valueFormatter: (position) => '测试数据$position',
            ),
            yAxis: RadarYAxis(
              lineWidth: 0.5,
              lineColor: Colors.grey[400]!,
              drawLabel: true,
              lineStyle: LineStyle.circle,
              labelOffsetAxis: 2,
              labelDrawStartAngle: -30,
              lineDashConfig: (position) => position == 3 ? [5, 5] : null,
              valueFormatter: (position) =>
                  position == 0 ? '' : (position * 20).toString(),
            ),
            dataRender: const RadarDataRender(
                highLightRender: RadarChartHighLightRender()),
            data: [
              RadarData(
                lineColor: const Color(0xFF106CF5),
                fillBg: true,
                fillBgColor: const Color(0x335283C9),
                // fillBgDrawable: image,
                values: [
                  RadarEntity(value: 85, xIndex: 0),
                  RadarEntity(value: 75, xIndex: 1),
                  RadarEntity(value: 95, xIndex: 2),
                  RadarEntity(value: 70, xIndex: 3),
                  RadarEntity(value: 65, xIndex: 4),
                  RadarEntity(value: 80, xIndex: 5),
                ],
              ),
              RadarData(
                lineColor: const Color(0xFFFF0000),
                fillBg: true,
                fillBgColor: const Color(0x33BE3E38),
                // fillBgDrawable: image,
                values: [
                  RadarEntity(value: 75, xIndex: 0),
                  RadarEntity(value: 85, xIndex: 1),
                  RadarEntity(value: 65, xIndex: 2),
                  RadarEntity(value: 75, xIndex: 3),
                  RadarEntity(value: 60, xIndex: 4),
                  RadarEntity(value: 88, xIndex: 5),
                ],
              )
            ]),
      ),
    );
  }

  /// 空数据饼状图
  Widget buildEmptyRadarChart() {
    return Container(
      width: 160,
      height: 160,
      color: Colors.lightBlue[200],
      child: KqChart(
        delegate: KqRadarChartDelegate.withDefault(radius: 70),
      ),
    );
  }

  /// 空数据饼状图
  Widget buildEmptyRadarChart2() {
    return SizedBox(
      width: 260,
      height: 260,
      child: KqChart(
        delegate: KqRadarChartDelegate(radius: 90),
      ),
    );
  }
}
